<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			var width=600;
			var height=600;
			var svg=d3.select("body").append("svg").attr("height",height).attr("width",width);			
			var dataset=[["小米",60.8],["三星",58.4],["联想",47.3],
						 ["苹果",46.6],["华为",41.3],["酷派",40.1],
						 ["其他",111.5]];
			//创建饼图布局
			var pie=d3.pie()
					  .value(function(d){return d[1];});
					  
/*			//创建设定范围的饼图布局（从0.2π到1.5π范围的饼）
			var pie=d3.pie()
					  .startAngle(Math.PI*0.2)
					  .endAngle(Math.PI*1.5)
					  .value(function(d){return d[1];});*/
			//dataset为初始数据，peidata为转换后的数据
			var piedata=pie(dataset);
			console.log(piedata);
			//定义饼图内外半径
//			var outerRadius=width/3;
			var outerRadius=function(d){return Math.sqrt(d.data[1],2)*15;};
			var innerRadius=0;
			//创建弧生成器
			var arc=d3.arc()
				      .outerRadius(outerRadius)
				      .innerRadius(innerRadius);
			var colors=d3.scaleOrdinal(d3.schemeCategory20);
			//在svg中添加piedata个数对应的g元素个数
			var arcs=svg.selectAll("g")
					    .data(piedata)
					    .enter()
					    .append("g")
					    .attr("transform","translate("+width/2+","+height/2+")");
			//为每个g元素添加弧的路径元素
			arcs.append("path")
				.attr("fill",function(d,i){
					return colors(i);
				})
				.attr("d",function(d){
					return arc(d);
				});
			x=function(d){return arc.centroid(d);}
			console.log(x)
			//为每个g元素添加文字
			arcs.append("text")
			 	.attr("transform",function(d){
			 		//arc.centroid(d)返回一组[x,y]的坐标数据，是弧的中心位置坐标
			 		var x=arc.centroid(d)[0];
			 		var y=arc.centroid(d)[1];
			 		return "translate("+x+","+y+")";
			 	})
			 	.attr("text-anchor","middle")
			 	.text(function(d){
			 		//计算各弧度占比
			 		var percent=Number(d.value)/
			 			d3.sum(dataset,function(d){return d[1]})*100;
			 		return percent.toFixed(1)+"%";
			 	})
			 //添加饼图外边的连接线
			 arcs.append("line")
			 	 .attr("stroke","black")
			 	 .attr("x1",function(d){return arc.centroid(d)[0]*2;})
			 	 .attr("y1",function(d){return arc.centroid(d)[1]*2;})
			 	 .attr("x2",function(d){return arc.centroid(d)[0]*2.2;})
			 	 .attr("y2",function(d){return arc.centroid(d)[1]*2.2;});
			 //添加弧外的文字元素
			 arcs.append("text")
			 	 .attr("transform",function(d){
			 	 	var x=arc.centroid(d)[0]*2.5;
			 	 	var y=arc.centroid(d)[1]*2.5;
			 	 	return "translate("+x+","+y+")";
			 	 })
			 	 .text(function(d){return d.data[0];})
			 	 .attr("text-anchor","middle");
			 	 
/*			 //右边添加图例
			svg.selectAll(".rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x",510)
			   .attr("y",function(d,i){return 200+20*i;})
			   .attr("height",20)
			   .attr("width",30)
			   .attr("fill",function(d,i){return colors(i);});
			//添加文字
			svg.selectAll(".text")
				.data(dataset)
				.enter()
				.append("text")	
				.attr("x",545)
				.attr("y",function(d,i){return 200+20*i;})
				.attr("dy","1em")
				.attr("font-size","14px")
				.text(function(d){return d[0]});*/
		</script>

	</body>
</html>
